{% extends 'scms/base.html' %}
{% block link %}
    <link href="/static/scms/dist/css/pcmanager.css" rel="stylesheet" type="text/css">
    <link href="/static/scms/vendor/bootstrap/css/bootstrapValidator.min.css" rel="stylesheet">
{% endblock %}
{% block body %}
<div class="wrapper wrapper-content animated fadeInRight">
			    <div class="row">
			        <div class="col-lg-12">
						{% if zhuangtai %}
							<div id="zhuangtai2" class="alert alert-danger alert-dismissible" role="alert">
						{% else %}
							<div style="display: none"  id="zhuangtai2" class="alert alert-danger alert-dismissible" role="alert">
						{% endif %}
							  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only"></span></button>
							  <strong>创建组失败，组名重复！</strong>
							</div>
			            <div class="ibox float-e-margins" id="all">
			                <div class="ibox-title shezhiye">
			                    <h3> 编组管理页</h3>
			                    <h5> *创建,添加,删除组及成员</h5>
			                </div>
							<div class="col-lg-12">
			                <div class="ibox-content">
			                        <div class="col-sm-6 ibox-title" style="padding-left: 0">
			                            <a href="#myModal2" class="btn btn-sm btn-primary " data-toggle="modal" data-placement="bottom"><span class="glyphicon-plus"></span> 创建组 </a>
			                        </div>
			                        <!--添加机器弹窗-->
						            <div class="modal fade bs-example-modal-lg" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									  <div class="modal-dialog modal-lg">
									    <div class="modal-content">
									      <div class="modal-header">
									        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
									        <h4 class="modal-title" id="myModalLabel">创建组</h4>
                                              <span style="color: red;margin-left: 40px;font-size: 13px">*组名一旦创建，不可以修改</span>
									      </div>
									      <div class="modal-body">
									        <form class="form-horizontal" action="/scms/groupmodify/" method="post" id="creategroup">{% csrf_token %}
{#									            <div class="control-group">#}
{#									                <label class="control-label" for="groupname">组名：</label>#}
{#									                <div class="controls">#}
{#									                    <input class="form-control" id="groupname" name="groupname" placeholder="请输入组名" type="text" />#}
{#									                </div>#}
{#									            </div>#}
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="groupname">组名:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="groupname" class="form-control" name="groupname" placeholder="请输入组名" />
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="nginx">推送nginx路径:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="nginx" class="form-control" name="nginx" placeholder="请输入nginx推送路径,如不填写默认推送至/tmp下." />
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="tomcat">推送tomcat路径:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="tomcat" class="form-control" name="tomcat" placeholder="请输入tomcat推送路径,如不填写默认推送至/tmp下." />
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="description">备注:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="description" class="form-control" name="description" placeholder="请输入备注信息" />
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <div class="modal-footer">
									        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									        <button type="submit" form="creategroup" class="btn btn-primary" value="submit">提交</button>
									      </div>
									      </div>
									        </form>
									      </div>

										</div>
									</div>
									</div>
						            <!--弹窗结束-->
                            <!--编辑弹窗-->
						            <div class="modal fade bs-example-modal-lg" id="myModaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									  <div class="modal-dialog modal-lg">
									    <div class="modal-content">
									      <div class="modal-header">
									        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
									        <h4 class="modal-title" id="myModalLabel">编辑组</h4>
                                              <span style="color: red;margin-left: 40px">*组名不可以修改</span>
									      </div>
									      <div class="modal-body">
									        <form class="form-horizontal" action="/scms/editgroup/" method="post" id="editgroup">{% csrf_token %}
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="id">id:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="id" class="form-control" name="id" placeholder="ID" readonly/>
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="groupname2">组名:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="groupname2" class="form-control" name="groupname2" placeholder="请输入组名" readonly/>
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="nginx2">推送nginx路径:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="nginx2" class="form-control" name="nginx2" placeholder="请输入nginx推送路径,如不填写默认推送至/tmp下." />
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="tomcat2">推送tomcat路径:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="tomcat2" class="form-control" name="tomcat2" placeholder="请输入tomcat推送路径,如不填写默认推送至/tmp下." />
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <label class="col-lg-2 control-label" for="description2">备注:</label>
                                                    <div class="col-lg-9">
                                                        <input type="text" id="description2" class="form-control" name="description2" placeholder="请输入备注信息" />
                                                    </div>
                                            </div>
                                                <div class="form-group">
                                                <div class="modal-footer">
									        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									        <button type="submit" form="editgroup" class="btn btn-primary" value="submit">提交</button>
									      </div>
									      </div>
									        </form>
									      </div>

										</div>
									</div>
									</div>
						            <!--弹窗结束-->
			                        <div id="export"></div>
			                        <table class=" table table-striped table-bordered table-hover " id="editable" name="editable">
			                            <thead>
			                                <tr>
			                                    <th class="text-center"> 序号 </th>
			                                    <th class="text-center"> 组名</th>
			                                    <th class="text-center"> 推送nginx路径 </th>
			                                    <th class="text-center"> 推送tomcat路径 </th>
			                                 <th class="text-center"> 备注</th>
			                                    <th class="text-center"> 操作 </th>
			                                </tr>
			                            </thead>
			                            <tbody>
											{% for topic in topics %}
													<tr class="gradeX">
														<td class="text-center" id="id{{ topic.id }}">{{ topic.id }}</td>
														<td class="text-center" id="name{{ topic.id }}">{{ topic.group_name }}</td>
                                                        {% if topic.nginx_puth %}
														    <td class="text-center" id="nginx{{ topic.id }}">{{ topic.nginx_puth }}</td>
                                                        {% else %}
                                                            <td class="text-center">未设置</td>
                                                        {% endif %}
                                                    {% if topic.tomcat_puth %}
														    <td class="text-center" id="tomcat{{ topic.id }}">{{ topic.tomcat_puth }}</td>
                                                        {% else %}
                                                            <td class="text-center">未设置</td>
                                                        {% endif %}
														<td class="text-center" id="desc{{ topic.id }}">{{ topic.description }}</td>
														<td class="text-center fenge" data-editable='false'>
															<button  type="button" class="btn btn-xs btn-info " onclick="edit_group({{ topic.id }})">编辑</button>
															<button  type="button" class="btn btn-xs btn-danger asset_del" onclick="del_group(this,{{ topic.id }});" >删除</button>

														</td>
													</tr>
												{% endfor %}
			                            </tbody>
			                        </table>
			                </div>
			                </div>
			            </div>
			        </div>
			    </div>
			<div id="fenye" class="pagination">
			    <nav>
				  <ul class="pagination">
					{% if topics.has_previous %}
						<li><a href="?page={{ topics.previous_page_number }}">&laquo;</a></li>
						{% else %}
						<li class="disabled"><a href="#">&laquo;</a></li>
					  {% endif %}
					  {% for page_number in topics.paginator.page_range %}
						{% ifequal page_number  topics.number %}
							<li class="active"><a>{{ page_number }}</a></li>
						{% else %}
							<li><a href="?page={{ page_number }}">{{ page_number }}</a></li>
						{% endifequal %}
					  {% endfor %}
					{% if topics.has_next %}
						<li><a href="?page={{ topics.next_page_number }}">&raquo;</a></li>
						{% else %}
						<li class="disabled"><a href="#">&raquo;</a></li>
					{% endif %}
					</ul>
				</nav>
			</div>
        </div>
{% endblock %}
{% block javascript %}
	<script src="/static/scms/dist/js/jquery.cookie.js"></script>
    <script src="/static/scms/vendor/bootstrap/js/bootstrapValidator.min.js"></script>
	<script>
		var csrftoken = $.cookie('csrftoken');
	function csrfSafeMethod(method) {
		// these HTTP methods do not require CSRF protection
		return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
	}
	$.ajaxSetup({
		beforeSend: function(xhr, settings) {
			if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
				xhr.setRequestHeader("X-CSRFToken", csrftoken);
			}
		}
	});
		function Doajax(doc,id) {
			$("#devid").attr("value",id);
			$('#myModal3').modal({show:true});
	};
		function del_group(doc,id) {
			$("#devid").attr("value",id);
		$.ajax({
			url:'/scms/delgroup/',
			type:'POST',
			data:{modify:id},
			success:function (arg) {
				window.location.reload();
				var obj = jQuery.parseJSON(arg);
				var this_id = $(doc).attr('id');
				console.log(this_id);
				console.log(obj.status);
			},
			error:function () {
				console.log('failed');
			}
		});
	};
    function edit_group(id) {
		$("#id").attr("value",id);
		$("#groupname2").attr("value",$("#name"+id).text());
		$("#nginx2").attr("value",$("#nginx"+id).text());
		$("#tomcat2").attr("value",$("#tomcat"+id).text());
		$("#description2").attr("value",$("#desc"+id).text());
			$('#myModaledit').modal({show:true});
	};
	</script>
    <script>
$(document).ready(function() {
    $('#creategroup')
        .bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                groupname: {
                    validators: {
                        notEmpty: {
                        message: '组名不得为空！'
                        },
                        stringLength:{
                        min:0,
                        max:15,
                        message:'组名应小于15个字符.'
                    },
                    }
                },
                description: {
                    validators: {
                        stringLength:{
                        min:0,
                        max:15,
                        message:'备注应小于15个字符.'
                    },
                    }
                },
            }
        });
});
    $(document).ready(function() {
    $('#editgroup')
        .bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                description2: {
                    validators: {
                        stringLength:{
                        min:0,
                        max:15,
                        message:'备注应小于15个字符.'
                    },
                    }
                },
            }
        });
});
</script>

{% endblock %}